import { Table, Image } from 'antd';
import { useEffect, useState } from 'react';

import businessLogService from '@/api/services/business-log/businessLogService';

import { BusinessLog, User } from '#/entity';

export interface BusinessLogProps {
  module: string;
  entity: string;
  entityId: string;
}

export default function BusinessLogList({ module, entity, entityId }: BusinessLogProps) {
  const [tableData, setTableData] = useState<BusinessLog[]>([]);
  useEffect(() => {
    if (entityId) {
      businessLogService
        .list({
          module,
          entity,
          entityId,
        })
        .then((res) => {
          setTableData(res);
        });
    }
  }, [module, entity, entityId]);
  // 操作日志表格列
  const columns = [
    {
      title: '时间',
      dataIndex: 'createAt',
    },
    {
      title: '操作人',
      dataIndex: 'major',
      render: (major: User, record: BusinessLog) => {
        return `${major} ${record.operator?.name} ${record.action}`;
      },
    },
    {
      title: '附件',
      dataIndex: 'attachments',
      render: (attachments: string) => (
        <div>{attachments ? <Image src={attachments} width={80} /> : ''}</div>
      ),
    },
    {
      title: '原因',
      dataIndex: 'memo',
    },
  ];

  return (
    <Table
      rowKey="id"
      scroll={{ y: '200px' }}
      size="small"
      columns={columns}
      dataSource={tableData}
      pagination={false}
    />
  );
}
